import React, { Component } from 'react'

export default class Item extends Component {
    state = {mouse:null}
    handleMouse=(prop) =>{
        return ()=>{
            this.setState({mouse:prop});
        }
    }
    handleCheck = (id) =>{
        return (event)=>{
            this.props.updateTodo(id,event.target.checked)
        }
    }
    handleDelet =(id)=>{
        if(window.confirm('确定删除吗'))
        this.props.deleteTodo(id)
    }
    render() {
        const {id,name,done} =this.props
        
        return (
            <div>
                <li style={{backgroundColor:this.state.mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                    <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
                    <span>{name}</span>
                    </label>
                    <button onClick={()=>this.handleDelet(id)} className="btn btn-danger" style={{display:this.state.mouse ? 'block' : ' none'}}>删除</button>
                </li>
            </div>
        )
    }
}
